<template>
	<view class="container" style="padding-top: 10rpx;
    padding-bottom: 20rpx;">

		<view class="card" v-for="(item,index) in orderList">
			<view>
				订单号:W202308171000071692262242
			</view>

			<view style="display: flex;align-items: center;">
				<view>
					<image src="https://qw.lvd8.cn//2023-08/1692351549.jpeg" mode="widthFix"
						style="width: 80rpx;border-radius: 50%;"></image>
				</view>
				<view style="padding: 20px 25px;white-space: nowrap;">
					微信用户
				</view>
			</view>

			<view style="font-size: 26rpx;">
				<view class="listStyle">
					<view class="listKey">下单地址：</view>
					<view class="listValue">广东省-深圳市-龙岗区</view>
				</view>
				<view class="listStyle">
					<view class="listKey">消费金币：</view>
					<view class="listValue">2</view>
				</view>
				<view class="listStyle">
					<view class="listKey">预约时间：</view>
					<view class="listValue">2023-08-17 16:50:00</view>
				</view>
				<view class="listStyle">
					<view class="listKey">支付时间：</view>
					<view class="listValue">2023-08-18 14:38:31</view>
				</view>
			</view>
		</view>
		
		<view v-if="orderList.length<=0" class="tipsWrapper">
			当前暂无订单信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: []
			}
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			async getOrderList() {
				const {
					data
				} = await this.$http('/appapi/member/broker_orderlist');
				console.log("================================")
				console.log(data)
				this.orderList = data
			}
		}
	}
</script>

<style scoped>
	.orderItemsStyle {
		display: flex;
		justify-content: space-between;
	}

	/* 	.itemsKey:{
		color: #A3A5AE;
	}
	.itemsValue{
		color: #898385;
	} */
	.tipsWrapper {
		font-size: 25rpx;
		color: #8E9897;
		padding: 50rpx;
		text-align: center;
	}

	.container {
		background-color: #e7e7e7;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.card {
		width: 95%;
		background-color: #ffffff;
		margin: 20rpx auto;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.listStyle {
		display: flex;
		justify-content: space-between;
	}

	.listkey {
		color: #A3A5AE;
	}

	.listValue {
		color: #898385;
	}
	
	.tipsWrapper{
	  font-size: 25rpx;
	  color: #8E9897;
	  text-align: center;
	  padding: 50rpx;
	}
</style>